
import { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import './index.scss'
import Nav from "../../component/Nav/index"
//接口
import { getgroup, delgroup, setstatus } from '../../api/house'
import { Button, Switch, Toast } from 'antd-mobile/2x'
export const Group = () => {
    //路由
    const { push } = useHistory()
    const [data, setData] = useState([])
    //初始化获取数据
    useEffect(() => {
        getList()
    }, [])
    const getList = async () => {
        let res = await getgroup()
        setData(res.data)
    }
    //删除
    const removeGroup = async (id) => {
        let res = await delgroup({ id })
        console.log(res);
        if (res.code === 200) {
            getList();
            Toast.show({
                content: "删除成功"
            });
        } else {
            Toast.show({
                content: "删除失败"
            });
        }
    }
    //改变状态
    const setState = async (flag, id) => {
        let res = await setstatus({ flag, id })
        console.log(res);
        if (res.code === 200) {
            Toast.show({
                content: "修改成功"
            });
            getList()
        } else {
            Toast.show({
                content: "修改失败"
            });
        }
    }
    return (
        <div className="group">
            <Nav>团购</Nav>
            <div className="group-main">
                {
                    data.length ? data.map(item => {
                        return <div className="group-item" key={item.id}>
                            <img src={item.img} alt="" onClick={() => {
                                push({ pathname: '/groupDetail', state: { id: item.id, name: '团购详情' } })
                            }} />
                            <div className='group-box'>
                                <h3>{item.name}</h3>
                                <p>{item.address}</p>
                                <div>
                                    <span>活动时间：{item.Update_time}</span>
                                    <span>已报名{item.num}人</span>
                                </div>
                                <div>
                                    <Switch uncheckedText='关闭' checkedText='开启' checked={item.flag === 'true' ? true : false} onChange={(e) => {
                                        setState(e, item.id)
                                    }} />
                                    <p>
                                        <Button size='small' color='primary'>开团</Button>
                                        <Button size='small' onClick={() => {
                                            removeGroup(item.id)
                                        }}>删除</Button>
                                    </p>
                                </div>
                            </div>
                        </div>
                    }) : ''
                }
            </div>
            <div className="mask" onClick={() => {
                push({ pathname: '/addgroup', state: { name: '创建团购' } })
            }}>
                创建团购
            </div>
        </div>
    );
};

export default Group;